<template>
  <div class="func-comp-form">
    <Form :label-width="105">
      <FormItem label="自定义Class">
        <Input type="text" size="small" v-model="className"/>
      </FormItem>
      <FormItem label="栅格列宽度">
        <Tooltip content="栅格列的占位格数，可选值为0~24的整数" placement="left">
          <InputNumber size="small" :max="24" :min="0" v-model="span" :active-change="false"></InputNumber>
        </Tooltip>
      </FormItem>
      <FormItem label="左侧间隔数">
        <InputNumber size="small" :max="24" :min="0" v-model="offset" :active-change="false"></InputNumber>
      </FormItem>
      <FormItem label="向右移动格数">
        <InputNumber size="small" :max="24" :min="0" v-model="push" :active-change="false"></InputNumber>
      </FormItem>
      <FormItem label="向左移动格数">
        <InputNumber size="small" :max="24" :min="0" v-model="pull" :active-change="false"></InputNumber>
      </FormItem>
      <FormItem label="背景色">
        <PnColorPicker size="small" v-model="styleConfig.backgroundColor" alpha recommend/>
      </FormItem>
      <FormItem label="内边距">
        <InputNumber size="small" :max="1000" :min="0" v-model="styleConfig.padding" :active-change="false"></InputNumber> px
      </FormItem>
    </Form>
    <FormItemPanel title="边框">
      <Form>
        <FormItem label="左边框">
          <InputNumber class="m-r-5px" style="width: 60px;" size="small" :max="1000" :min="0" v-model="styleConfig.border.leftBorderWidth" placeholder="宽度px" :active-change="false"></InputNumber>
          <Select class="m-r-5px" style="width: 90px;" :transfer="true" size="small" v-model="styleConfig.border.leftBorderStyle">
            <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <PnColorPicker size="small" v-model="styleConfig.border.leftBorderColor" alpha recommend/>
        </FormItem>
        <FormItem label="上边框">
          <InputNumber class="m-r-5px" style="width: 60px;" size="small" :max="1000" :min="0" v-model="styleConfig.border.topBorderWidth" placeholder="宽度px" :active-change="false"></InputNumber>
          <Select class="m-r-5px" style="width: 90px;" :transfer="true" size="small" v-model="styleConfig.border.topBorderStyle">
            <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <PnColorPicker size="small" v-model="styleConfig.border.topBorderColor" alpha recommend/>
        </FormItem>
        <FormItem label="右边框">
          <InputNumber class="m-r-5px" style="width: 60px;" size="small" :max="1000" :min="0" v-model="styleConfig.border.rightBorderWidth" placeholder="宽度px" :active-change="false"></InputNumber>
          <Select class="m-r-5px" style="width: 90px;" :transfer="true" size="small" v-model="styleConfig.border.rightBorderStyle">
            <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <PnColorPicker size="small" v-model="styleConfig.border.rightBorderColor" alpha recommend/>
        </FormItem>
        <FormItem label="下边框">
          <InputNumber class="m-r-5px" style="width: 60px;" size="small" :max="1000" :min="0" v-model="styleConfig.border.bottomBorderWidth" placeholder="宽度px" :active-change="false"></InputNumber>
          <Select class="m-r-5px" style="width: 90px;" :transfer="true" size="small" v-model="styleConfig.border.bottomBorderStyle">
            <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <PnColorPicker size="small" v-model="styleConfig.border.bottomBorderColor" alpha recommend/>
        </FormItem>
      </Form>
    </FormItemPanel>
  </div>
</template>

<script>
import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});
export default {
  name: "GridColWidgetForm",
  // mixins: [FuncCompFormMixin],
  props: {},
  data() {
    return {}
  },
  mounted() {

  },
  methods: {},
  computed: {
    ...mapFields({

      className: 'component.compConfigData.className',
      span: 'component.compConfigData.span',
      offset: 'component.compConfigData.offset',
      push: 'component.compConfigData.push',
      pull: 'component.compConfigData.pull',
      styleConfig: 'component.compConfigData.styleConfig'

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
